<template>
  <div class="wapper">
    <div @click="show = true" class="value">
      <van-loading v-if="loading">加载中，请稍候...</van-loading>
      <template v-else>{{ text ? text : "请选择" }}</template>
    </div>

    <van-popup
      v-model="show"
      safe-area-inset-bottom
      close-on-popstate
      position="bottom"
      get-container="body"
    >
      <van-empty
        v-if="!loading && columns.length < 1"
        :image="require('@/assets/empty.svg')"
        description="暂无数据"
      />

      <van-picker
        v-else
        class="picker-wapper"
        ref="picker"
        value-key="text"
        visible-item-count="3"
        show-toolbar
        :loading="loading"
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import { Picker, Popup, Loading, Empty } from "vant";
import { getDictionarySelect } from "@/api/base";
import { to } from "@/utils";

export default {
  name: "MaterialType",
  components: {
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Loading.name]: Loading,
    [Empty.name]: Empty,
  },
  model: {
    event: "change",
  },
  props: {
    value: {
      type: [String, Number],
      required: true,
    },
  },
  data() {
    return {
      columns: [],
      show: false,
      loading: false,
      text: "",
      token: "",
			valueMirror: ""
    };
  },
  // computed: {
  //   valueMirror: {
  //     get: function () {
	// 			console.log('this.value',this.value)
  //       return this.value;
  //     },
  //     set: function (val) {
	// 			console.log('val',val)
  //       this.$emit("change", val);
  //     },
  //   },
  // },
	watch: {
		value: {
			handler(newVal, oldVal) {
				this.valueMirror = newVal;
			},
			immediate: true, // 立即执行
		}
	},
  methods: {
    onConfirm({ value, text }) {
      this.valueMirror = value;
			this.$emit("change", value);
      this.text = text;
      this.$nextTick(() => (this.show = false));
    },
    onCancel() {
      this.show = false;
    },
    async fetchColumns() {
      const queryParams = {
        pageModel: {
          Token: this.token,
          Search: ["MaterielType"],
        },
      };
      this.loading = true;
      const [err, res] = await to(getDictionarySelect(queryParams));
      this.loading = false;
      if (!err) {
        var resObj = {
          text: "请选择",
          value: "",
        };

        var columnData = Array.isArray(res.Result) ? res.Result : [];
        columnData.unshift(resObj);
        this.columns = columnData;
			if(this.valueMirror) this.text = this.columns.find((item) => item.value == this.valueMirror).text;
			else{
				this.valueMirror = this.columns[0]?.value || "";
				this.text = this.columns[0]?.text || "";
			}
        
      }
    },
  },
  created() {
    this.token = localStorage.getItem("tokenKey");
    this.fetchColumns();
  },
};
</script>

<style lang="less" scoped>
.wapper,
.value {
  width: 100%;
  height: 100%;
  text-align: center;
}
/deep/.van-popup--bottom {
  height: 50vh !important;
}
</style>